<template>
  <div>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="card-title">{{ title }}</span>
        <el-button style="float: right" size="mini" type="primary" @click="() => handleSave(false)">保存</el-button>
        <el-button style="float: right; margin-right: 10px" size="mini" v-if="!this.id"
          @click="() => handleSave(true)">保存并新增</el-button>
      </div>
      <div class="text item">
        <el-form :model="employee" :rules="rules" ref="employeeForm" label-width="100px" label-position="left">
          <el-form-item label="编号" prop="code">
            <el-input v-model="employee.code" style="width: 180px;"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="employee.name" style="width: 180px;"></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="departmentId">
            <department-select v-model="employee.departmentId" style="width: 180px;"></department-select>
          </el-form-item>
          <el-form-item label="手机" prop="phone">
            <el-input v-model="employee.phone" style="width: 180px;"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="employee.email" style="width: 180px;"></el-input>
          </el-form-item>
          <el-form-item label="激活" prop="activated">
            <el-switch v-model="employee.activated" style="width: 180px;"> </el-switch>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getEmployee, addEmployee, updateEmployee } from "@/api/employee";
import departmentSelect from "@/components/Select/departmentSelect.vue";
export default {
  components: {
    departmentSelect,
  },
  data() {
    return {
      employee: { id: "", code: "", name: "", departmentId: null, phone: null, email:null , activated: true },
      rules: {
        code: [{ required: true, message: "请填写编号", trigger: "blur" }],
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
        phone: [{ required: true, message: "请填写手机号", trigger: "blur" }],
        email: [{ required: true, message: "请填写邮箱", trigger: "blur" }],
        departmentId: [
          { required: true, message: "请选择部门", trigger: "blur" },
        ],
      },
      title: "",
    };
  },
  methods: {
    getData() {
      if (!this.id) return;
      getEmployee(this.id).then((res) => {
        this.employee = res || {};
      });
    },
    handleSave(afterAdd) {
      this.$refs.employeeForm.validate((valid) => {
        if (valid) {
          this.saveData(afterAdd);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    saveData(afterAdd) {
      if (!this.id) {
        addEmployee(this.employee).then((res) => {
          if (!res) return;
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
            position: "bottom-right",
          });
          if (afterAdd) {
            this.employee = {};
          } else {
            this.$emit("refresh", res);
          }
        });
      } else {
        updateEmployee(this.employee).then((res) => {
          if (!res) return;
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
            position: "bottom-right",
          });
          if (afterAdd) {
            this.employee = {};
          } else {
            this.$emit("refresh", res);
          }
        });
      }
    },
  },
  mounted() {
    this.title = this.id ? "编辑" : "新增";
    this.getData();
  },
  props: {
    id: {
      type: String,
      default: "",
    },
  },
};
</script>
<style scoped></style>
